<template>
	<div>
		<div style="display: flex;height: 100%;">
			<base-layout ref="othertablePage" :selectTable="selectTable" @pageChange="pageChange" style="flex:1"
				:showTitle="false" @onFuncBtn="getFuncBtn" :isPage="true">

				<div slot="main" slot-scope="{ tableHeight }" style="height: 100%;">
					<base-table ref="othertable" :border="true" :showIndex="false" :tabLoading.sync="tabLoading"
						@radioChange="radioChange" :slotrow="true" :tableHeight="tableHeight" :tableData="tableData"
						:tableColumn="tableColumn">

						<template v-slot:option="{ row }">
							<el-radio v-model="radioModel" :label="row.$index">
								<span></span>
							</el-radio>
						</template>
						<template v-slot:state="{ row }">
							<el-switch style="display: block" v-model="row.row.state" active-color="#13ce66"
								:active-value="1" :inactive-value="0" @change="lockState(row.row)">
							</el-switch>
						</template>
					</base-table>
				</div>
			</base-layout>
		</div>
		<!-- 
		<base-dialog :closeEscape="true" :showClose="true" :closeModal="false" :dialogVisible.sync="addDialog"
			:footerShow="true" @handleConfirmClick="handleAddDialogDetails"
			:title="dialogType == 'add' ? '新增第三方系统信息' : '编辑第三方系统信息'" width="600px" top="20vh">
			<base-form ref="customForm" :formRow="formRow" :isFunBtn="false" :rules="rules" :spanNumber="24">
			</base-form>
		</base-dialog> -->
		<add-dialog ref="addDialog" @handleAddDialogDetails="handleAddDialogDetails"></add-dialog>

	</div>
</template>

<script>
import baseLayout from "@/components/base/baseLayout";
import baseTable from "@/components/base/baseTable";
import baseDialog from "@/components/base/BaseNewDialog/index.vue";
import baseForm from "@/components/base/baseNewForm/index.vue";
import { GetDataSourcePerson, } from "@/api/apis/documentManagement";
import { OtherGetBillList, OtherSaveData, DelData, } from '@/api/apis/tripartiteLink'
import addDialog from "./addDialog.vue"
export default {
	name: "triopleSet",
	components: {
		baseLayout, baseTable, baseDialog, baseForm, addDialog
	},
	data() {
		return {
			tabLoading: false,
			tableData: [],
			selectTable: [],
			radioModel: false, //单选
			sort: true,
			dialogType: '',
			// 搜索配置
			addDialog: false,
			state: '',
			tableColumn: [
				// {
				// 	label: "唯一id",
				// 	prop: "billid",
				// },
				// {
				// 	label: "系统名称",
				// 	prop: "sysName",
				// }, {
				// 	label: "系统链接",
				// 	prop: "sysLink",
				// }, {
				// 	label: "系统图标",
				// 	prop: "sysIcon",
				// }, {
				// 	label: "系统描述",
				// 	prop: "sysRemark",
				// }, {
				// 	label: "启用状态",
				// 	prop: "state",
				// },
			],
			// formRow: [
			// 	{
			// 		elCol: [{
			// 			label: '系统名称',
			// 			prop: 'sysName',
			// 			tag: 'elInput',
			// 		},]
			// 	}, {
			// 		elCol: [{
			// 			label: '系统描述',
			// 			prop: 'sysRemark',
			// 			tag: 'elInput',
			// 		},]
			// 	},
			// 	{
			// 		elCol: [{
			// 			label: '系统图标',
			// 			prop: 'sysIcon',
			// 			tag: 'elInput',
			// 		},]
			// 	},
			// 	{
			// 		elCol: [{
			// 			label: '系统地址链接',
			// 			prop: 'sysLink',
			// 			tag: 'elInput',
			// 		},]
			// 	},
			// ],
			rules: {
				sysRemark: [
					{
						required: true,
						message: "请输入系统描述",
						trigger: "blur",
					},
				], sysName: [
					{
						required: true,
						message: "请输入系统名称",
						trigger: "blur",
					},
				], sysIcon: [
					{
						required: true,
						message: "请选择系统图标",
						trigger: "blur",
					},
				], sysLink: [
					{
						required: true,
						message: "系统地址链接",
						trigger: "blur",
					},
				],
			},
			selectTableData: {},
			pageModel: { page: "1", limit: "20", SequenceName: 'createDate', Sequence: 'descending' },
		}
	},
	// watch: {
	// 	addDialog: {
	// 		deep: true, //深度监听设置为 true
	// 		handler: function (newV, oldV) {
	// 			if (newV == false) {
	// 				// this.formRow[0].elCol[0].disabled = false
	// 				this.$nextTick(() => {
	// 					this.$refs.customForm.resetFields('ruleForm')
	// 					this.$refs.othertablePage.pageClear()
	// 				})
	// 			}
	// 		}
	// 	},
	// },
	mounted() {
		this.initPage()
	},
	methods: {
		// 初始化页面
		initPage() {
			this.getTableList()
		},
		// 获取三方Link列表
		async getTableList() {
			this.tabLoading = true
			this.tableData = []
			let params = {
				...this.pageModel
			}
			let res = await OtherGetBillList(params)
			if (res.code == 1) {
				this.$nextTick(() => {
					this.tableData = res.data[1]
					this.$refs.othertablePage.setPageTotal(res.data[0])

					this.$refs.othertable.clearRadioIndex()
					this.selectTableData = {}
				})
			}
			if (this.sort) {
				const el = await GetDataSourcePerson({ billKindID: '166' })
				if (el.code == 1) {
					this.tableColumn = el.data[1].length == 0 ? el.data[0] : el.data[1]
					this.allField = el.data[0]
					this.tableColumn.forEach(el => {
						el.tooltip = true
					});
				}
				this.sort = false
			}
			this.tabLoading = false
		},
		// 单选
		radioChange(val) {
			this.selectTableData = val
			this.radioModel = val.index
			console.log(this.selectTableData, "22");
		},
		// 操作按钮事件
		getFuncBtn(btnEven) {
			if (btnEven.menuName === '新增') { // 新增
				this.dialogType = 'add'
				// this.addDialog = true
				this.$refs.addDialog.openDialog()
			}
			if (btnEven.menuName != '新增') {
				if (Object.keys(this.selectTableData).length === 0) {
					this.$vmNews('请选择一条数据!', 'warning')
					return
				}
			}
			if (btnEven.menuName === '编辑') { // 编辑
				this.dialogType = 'edit'
				this.$refs.addDialog.openDialog()
				this.$nextTick(() => {
					this.$refs.addDialog.setForm(this.selectTableData)
				})
			}
			// 删除
			if (btnEven.menuName == '删除') {
				this.$delConfirm().then(() => {
					let billid = this.selectTableData.billid
					this.removeTableItem(billid)
				})
			}
		},
		// 保存
		// handleAddDialogDetails() {
		// 	this.$refs.customForm.$refs['ruleForm'].validate((valid) => {
		// 		if (valid) { this.saveAddDialogDetails() } else {
		// 			this.$message({ message: '请输入必填项', type: 'warning' }); return
		// 		}
		// 	})
		// },
		async handleAddDialogDetails(val) {
			let params = {
				dataMain: {
					billCode: this.dialogType == 'add' ? '0000' : this.selectTableData.billid,
					...val,
				},
			}
			let res = await OtherSaveData(params)
			if (res.code === 1) {
				this.$vmNews('保存成功', 'success')
				this.addDialog = false
				this.$refs.addDialog.closeDialog()

				this.$refs.othertablePage.pageClear()
				this.getTableList()
			}
		},
		// 删除
		async removeTableItem(billid) {
			let params = {
				id: billid,
			}
			let res = await DelData(params)
			if (res.code === 1) {
				this.$vmNews('删除成功！', 'success')
				this.getTableList()
			}
		},
		// // 启用/停用
		// async lockState(row) {
		// 	let params = { id: row.billid, state: row.state == 1 ? "true" : "false", }
		// 	let res = await LockState(params)
		// 	if (res.code === 1) {
		// 		this.getTableList()
		// 	}
		// },
		//分页
		pageChange(model) {
			this.pageModel.page = model.page
			this.pageModel.limit = model.limit
			this.getTableList()
		}
	},
}
</script>
<style scoped lang='scss'>
::v-deep .el-form-item__error {
	padding: 0;
	top: 83%
}
</style>
